<template>
  <div class="task">
    <div class="search-panel">
      <el-form :inline="true" :model="form" class="search-panel--left" @submit.native.prevent>
        <el-form-item>
          <el-select style="width:230px;"
            v-model="form.pointCodeList"
            filterable 
            clearable
            multiple
            collapse-tags
            placeholder="请选择应急队伍">
            <el-option
              v-for="item in pointList"
              :key="item.pointCode"
              :label="item.pointName"
              :value="item.pointCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.startTime"
            type="date"
            style="width:150px"
            :picker-options="pickerOptions"
            placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.endTime"
            type="date"
            style="width:150px"
            :picker-options="pickerOptions"
            placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.taskName" clearable placeholder="请输入任务编码/名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.waterName" clearable placeholder="请输入水体/企业名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="search-panel--right">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="open">添加</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="batch">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <main-table
      ref="table"
      :loading="loading"
      :pageTotal="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
      :data="tableData"
      :columns="columns"
      :currentPage.sync="pageNum"
      :handleColumns="handleColumns"
      :columnType="columnType"
      border>
       <template slot-scope="scope" slot="reportPath">
         <span v-if="scope.row.reportPath" @click="download(scope.row)" style="cursor:pointer;">
           <icon-svg name="baogaoxiazai"></icon-svg>
         </span>
         <span v-else>--</span>
      </template>
      <template slot-scope="scope" slot="dataViewing">
         <el-link  @click="openView(scope.row)" style="cursor:pointer;">
            查看详情
         </el-link>
      </template>
      <template slot-scope="scope" slot="lat">
         <span v-if="scope.row.lat && scope.row.longi"> {{ scope.row.lat }},{{ scope.row.longi }}</span>
         <span v-else>--</span>
      </template>
      <!-- <template slot-scope="scope" slot="emergencyTypeName">
        <span v-if="scope.row.emergencyTypeName">       
            <el-link v-if="scope.row.emergencyType === '12'" type="danger" >{{ scope.row.emergencyTypeName }}</el-link>
            <el-link v-if="scope.row.emergencyType === '24'" type="warning" >{{ scope.row.emergencyTypeName }}</el-link>
            <el-link v-if="scope.row.emergencyType === '48'" type="primary" >{{ scope.row.emergencyTypeName }}</el-link>
        </span>
         <span v-else>--</span>
      </template> -->
      <!-- 0草稿  1下发 -->
      <template slot-scope="scope" slot="handle">
        <el-button type="text" @click="send(scope)" title="下发" :disabled="scope.row.taskStatus === 1">
          <icon-svg name="qiyong"></icon-svg>
        </el-button>
        <el-button type="text" @click="edit(scope)" title="编辑" :disabled="scope.row.taskStatus === 1">
          <icon-svg name="edit"></icon-svg>
        </el-button>
        <el-button type="text"  @click="remove(scope)" title="删除" :disabled="scope.row.taskStatus === 1">
          <icon-svg name="delete"></icon-svg>
        </el-button>
      </template>
    </main-table>
    <main-layer ref="layer" v-if="showLayer" @refresh="search"/>
    <task-data-details-dialog ref="dialog" v-if="showDialog" />
  </div>
</template>
<script>
import MainLayer from './components/task-layer';
import TaskDataDetailsDialog from './components/task-data-details-dialog';
export default {
  components: {
    MainLayer,
    TaskDataDetailsDialog
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      form: {
        endTime: '',
        startTime: '',
        taskName: '',
        waterName: '',
        pointCodeList: ''
      },
      showDialog: false,
      pointList: [],
      showLayer: false,
      pageTotal: 0,
      loading: false,
      columnType: ['selection', 'index'],
      columns: [
        { label: '任务名称', prop: 'taskName', width: '165px' },
        { label: '任务编码', prop: 'taskCode', width: '230px' },
        { label: '任务接收队伍', prop: 'pointName' },
        { label: '水体名称', prop: 'waterName' },
        { label: '企业名称', prop: 'companyName', width: '160px' },
        { label: '排口名称', prop: 'outletName' },
        { label: '经纬度信息', prop: 'lat', width: '176px' },
        { label: '任务紧急程度', prop: 'emergencyTypeName' },
        { label: '任务其他要求', prop: 'requirement' },
        { label: '监测数据查看', prop: 'dataViewing' },
        { label: '监测报告', prop: 'reportPath' }
      ],
      handleColumns: {
        label: '操作', align: 'center', fixed: 'right', width: 100
      },
      multipleSelection: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20
    };
  },
  computed: {

  },
  methods: {
    openView(row) {
      this.showDialog = true;
      this.$nextTick(_ => {
        this.$refs.dialog.initDialog(row);
      });
    },
    download(row) {
      console.log(row);
      window.open(row.reportPath);
      // window.location.href = row.reportPath;
    },
    batch() {
      if (this.multipleSelection.length) {
        const ids = this.multipleSelection.map(v => v.taskId);
        this.$confirm(`是否删除该这${ids.length}条记录?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteData(ids);
        }).catch(() => {

        });
      } else {
        this.$message({
          message: '请至少选择一项',
          type: 'warning'
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    open() {
      this.showLayer = true;
      this.$nextTick(_ => {
        this.$refs.layer.openDialog();
      });
    },
    edit(scope) {
      this.showLayer = true;
      this.$nextTick(_ => {
        this.$refs.layer.openDialogByEdit(scope.row);
      });
    },
    send(scope) {
      this.$confirm('确认下发任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          url: `/api/ems/task/down?taskId=${scope.row.taskId}`,
          type: 'post',
          params: {

          }
        };
        this.$ajax(params).then(resp => {
          const { result } = resp;
          if (result) {
            this.$message({
              type: 'success',
              message: '下发成功!'
            });
            this.getDataList();
          } else {
            this.$message.error('下发失败!');
          }
        });
      }).catch(() => {

      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      if (typeof val === 'number') {
        this.pageNum = val;
        this.getDataList();
      }
    },
    search() {
      this.pageNum = 1;
      this.getDataList();
    },
    getDataList() {
      const page = this.pageNum;
      const rows = this.pageSize;
      const params = {
        url: `/api/ems/task/page/list?page=${page}&rows=${rows}`,
        type: 'post',
        params: {
          endTime: this.form.endTime + ' 23:59:59',
          startTime: this.form.startTime + ' 00:00:00',
          taskName: this.form.taskName,
          waterName: this.form.waterName,
          pointCodeList: this.form.pointCodeList
        }
      };
      this.loading = true;
      this.$ajax(params).then(resp => {
        this.loading = false;
        const { result, rows, total } = resp;
        if (result) {
          this.tableData = rows;
          this.pageTotal = total;
        }
      });
    },
    remove(scope) {
      console.log(scope);
      this.$confirm('是否删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData([scope.row.taskId]);
      }).catch(() => {

      });
    },
    deleteData(ids) {
      const params = {
        url: `/api/ems/task/delete`,
        type: 'post',
        params: ids
      };
      this.$ajax(params).then(resp => {
        const { success } = resp;
        if (success) {
          this.$message({ type: 'success', message: '删除成功!' });
        }
        this.getDataList();
      });
    },
    getPointList() {
      const params = {
        url: `/api/ems/station/dropdown`,
        type: 'post',
        params: {
        }
      };
      this.$ajax(params).then(resp => {
        this.pointList = resp;
      });
    }
  },
  created() {
    this.form.startTime = this.$moment().startOf('month').format('YYYY-MM-DD');
    this.form.endTime = this.$moment().endOf('day').format('YYYY-MM-DD');
    this.getPointList();
    this.getDataList();
  }
};
</script>

<style lang="scss" scoped>
.announcement{

}
</style>
